<template>
  <div class="sy-container">
    <section class="sy1 chj_thematic_banner">

        <img src="~/assets/img/chjm_zzsc.JPG" alt="">
    </section>

    <section class="sy chjm_zzspfw">
       <h3>精选资质审批服务<span>品质推荐 我们为您省钱</span></h3>
       <div style="position: relative;">
         <div class="swiper-pagination chj_m_zzsc_dot" style="width: 100vw !important;"></div>
          <div v-swiper:mySwiper2="swiperOption">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                  <div class="box">
                  	<div class="top top1">
                  		<h5>建筑资质</h5>
                  		<p>建筑工程设计、招投标、施工等业务必备</p>
                  	</div>
                  	<div class="bottom">
                  		<ul>
                  			<li v-for="(gs,id) in title.zym.service[1].threeServiceRes" :key="id" :class="'li'+(id+1)" @click="xqymtz(gs.id,gs.pid)">
                  				<h5>{{gs.servicename}}</h5>
                  				<p>{{gs.remark}}</p>
                  			</li>
                  		</ul>
                  	</div>
                  </div>
              </div>

              <div class="swiper-slide">
                  <div class="box">
                  	<div class="top top2">
                  		<h5>网络游戏</h5>
                  		<p>网络游戏开发、运营等业务必备</p>
                  	</div>
                  	<div class="bottom">
                  		<ul>
                  			<li class="li" v-for="(gs,id) in title.zym.service[2].threeServiceRes" :key="id" :class="'li'+(id+5)"  @click="xqymtz(gs.id,gs.pid)">
                  				<h5>{{gs.servicename}}</h5>
                  				<p>{{gs.remark}}</p>
                  			</li>
                  		</ul>
                  	</div>
                  </div>
              </div>


            </div>

          </div>

       </div>
    </section>

    <section class="sy sy4 chjm_sy4">
      <h3>互联网<span>电子商务、盈利性网站建设等营利性互联网活动必备</span></h3>
      <div>
        <ul>
          <li v-for="(gs,id) in title.zym.service[3].threeServiceRes" :key="id" :class="'li'+(id+1)"  @click="xqymtz(gs.id,gs.pid)">

            <img :src="'https://exam.zhonghaiqihang.com/'+gs.fouriconimg">
            <h4>{{gs.servicename}}</h4>
            <p>{{gs.remark}}</p>
          </li>
        </ul>
      </div>
    </section>

		<section class="sy chjm_zzsc4">
		  <div class="chjm_zzsc4_item top">
        <h4>文化出版 <span>电视、电影、互联网影视剧制作及出版行业必备</span></h4>

		    <ul class="chjm_zzsc4_list">
		    	<li v-for="(gs,id) in title.zym.service[5].threeServiceRes" :key="id"  :class="'li'+(id+1)" @click="whcb(gblj[id])">
				<div class="pic">
          <em></em>
         </div>
		        <p>{{gs.servicename}}</p>
		      </li>
		    </ul>
		  </div>
		  <div class="chjm_zzsc4_item bottom">
		    <h4>食品行业 <span>开餐馆、做食品等相关业务必备</span></h4>
		    <ul class="chjm_zzsc4_list">
		    	<li v-for="(gs,id) in title.zym.service[4].threeServiceRes" :key="id" :class="'li'+(id+1)" @click="whcb(splj[id])">
              <div class="pic">
                <em></em>
               </div>
		        <p>{{gs.servicename}}</p>
		      </li>
		    </ul>
		  </div>


		</section>


    <section class="sy sy4 chjm_sy4 chjm_zzsc5">
      <h3>其它行业<span>专业办理 下证快 费用低</span></h3>
      <div>
        <ul>
          <li v-for="(gs,id) in title.zym.service[6].threeServiceRes" :key="id" :class="'li'+(id+1)"  @click="xqymtz(gs.id,gs.pid)">

            <img :src="'https://exam.zhonghaiqihang.com/'+gs.fouriconimg">
            <h4>{{gs.servicename}}</h4>
            <p>{{gs.remark}}</p>
          </li>

        </ul>
      </div>
    </section>

     <section class="sy chjm_zzsc6">
       <h3>高新认证<span>深谙科委高新小组审核规则，申请快速通过不耽搁</span></h3>
       <div class="chjm_zzsc6_box">
          <div class="chjm_zzsc6_item" v-for="(gs,id) in title.zym.service[0].threeServiceRes" :class="['chjm_zzsc6_item'+(id+1)]" @click="xqymtz(gs.id,gs.pid)">
            <div class="pic">
              <em></em>
            </div>
            <div class="text">
              <h5>{{gs.servicename}}</h5>
              <p>{{gs.remark}}</p>
            </div>
          </div>
       </div>
     </section>



    <section class="sy sy8">
      <h3>咨询管家<span style="font-size: .19rem">专业管家在线服务，一对一免费咨询</span></h3>
      <div class="two zb">
        <ul class="ct zb">
          <li v-for="(data,id) in title.gj" :key="id" :class="'li'+id" :style="{background:'url('+'https://exam.zhonghaiqihang.com'+data.avatar+') no-repeat 0rem 0/3.4rem 2.69rem',width:'3.2rem',height:'2.69rem'}">
            <div class="top">
              <h4>{{data.username}}</h4>
              <p class="p2">经营资质顾问</p>
              <p class="p3">{{data.mobile}}</p>
            </div>
            <a @click="chj_gj(data,id)"  href="JavaScript:;">立即咨询</a>
          </li>
        </ul>
      </div>
    </section>
    <section class="sy sy9" style="margin-top: .18rem">
      <h3>用心对待<span>一个互联网服务品牌 企业服务智能升级的实践者</span> <em @click="more()">更多</em></h3>
      <ul>
        <li><img src="~/assets/img/m-sy91.png">
          <p>快速响应</p>
        </li>
        <li><img src="~/assets/img/m-sy92.png">
          <p>信息安全</p>
        </li>
        <li><img src="~/assets/img/m-sy93.png">
          <p>进度掌握</p>
        </li>
        <li><img src="~/assets/img/m-sy94.png">
          <p>专属服务</p>
        </li>
        <li><img src="~/assets/img/m-sy95.png">
          <p>提供售后</p>
        </li>
      </ul>

    </section>
  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';

  // import Logo from '~/components/Logo.vue'
  export default {
    components: {
      // Logo
    },
    data(){
      return{
        datas:null,
        splj:['/Mobile/ServiceDetails/95?name=92','/Mobile/ServiceDetails/109?name=92','/Mobile/ServiceDetails/95?name=92','/Mobile/ServiceDetails/95?name=92','/Mobile/ServiceDetails/95?name=92'],
        gblj:['/Mobile/ServiceDetails/96?name=92','/Mobile/ServiceDetails/112?name=92','/Mobile/ServiceDetails/105?name=92','/Mobile/ServiceDetails/105?name=92','/Mobile/ServiceDetails/111?name=92'],
        swiperOption: {
          loop: true,
          slidesPerView: 'auto',
          centeredSlides: true,
          autoplay:{
            delay:5000,
            disableOnInteraction:false,
            spaceBetween:5000,
          },
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true
          },
          on: {
            slideChange() {
            },
            tap() {
            }
          }
        }

      }
    },
    async asyncData ({ params }) {
    let nh2 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Special/specialData`,{
      params:{
        serviceid:'1'
      }});
    let nh3 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Special/specialData`,{
      params:{
        serviceid:'91'
      }});
       let aa = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Receptionist/receptionistData`);
    let data  = {zym:nh2.data,zym:nh3.data,gj:aa.data};
    return { title: data}
  },
  head () {
    return {
      title: this.title.zym.oneService.title,
      meta: [
        { hid: 'description', name: 'description', content: this.title.zym.oneService.descript},
        { hid: 'keywords', name: 'keywords', content:this.title.zym.oneService.keyword }
      ]
    }
  },
  // middleware: 'statsm',
  mounted:function(){
    console.log(this.title)
    $('header').show();
    // function IsPC() {
    //   var userAgentInfo = navigator.userAgent;
    //   var Agents = ["Android", "iPhone",
    //     "SymbianOS", "Windows Phone",
    //     "iPad", "iPod"];
    //   var flag = true;
    //   for (var v = 0; v < Agents.length; v++) {
    //     if (userAgentInfo.indexOf(Agents[v]) > 0) {
    //       flag = false;
    //       break;
    //     }
    //   }
    //   return flag;
    // }
    // if(IsPC()){
    //   this.$router.push('/Business');
    // }else{
    //
    // }


  }
  ,methods:{
    
    chj_gj:function(e1,e2){
      let href = '/Mobile/visitingCard/'+e1.id
      location.href = href;
    },
    
    xqymtz:function(e1,e2){

      let href = '/Mobile/ServiceDetails/'+e1+'?name='+e2;
      location.href = href;
    },
    whcb:function(e){
      location.href = e;
    },
    more:function(e){
      location.href = ('/Mobile/More');
    }
  }

  }
</script>

<style>

</style>
